<template>
    <div class="home">
      <header class="tc ">
            <h1 class="title pr pr20 pl20 f35 cfff fn">
               <router-link class="img pa cfff" :to="{
                    name:'washCar',
                    params:{id:id}
                    }">
                    <i class="el-icon-arrow-left  f40 "></i>
                </router-link>
                    确认订单
            </h1>
        </header>
        <main class="p20">
            <section class="main-order bcfff mb20">
                <ul class="img flex jcsa cfff mb30 p20">
                    <li class="order">
                      <p>预约服务</p>
                    </li>
                    <li class="wd125">
                      <div class=" border-dash" ></div>
                    </li>
                    <li class="pay">
                      <p>支付订单</p>
                    </li>
                    <li class="wd125">
                      <div class="border-dash"></div>
                    </li>
                    <li class="store">
                      <p>门店服务</p>
                    </li>
                </ul>
                <div class="line mb50" style="height:7rem"></div>
                <ul class="info ">
                    <li class="flex mb35">
                      <img class="store asc mr20" src="../../../assets/img/wash-car-img/store.png">
                      <div>
                        <h2 class="mb15 fn f25">{{storeInfo.name}}</h2>
                        <p class="c808">{{storeInfo.location}}</p>
                      </div>
                    </li>
                    <li class="flex  mb50">
                      <img class="store asc mr20" src="../../../assets/img/wash-car-img/user.png" style="height: 32rem;width: auto;">
                      <div class="flex jcsb fg1">
                        <h2 class="fn">{{obj.principal}}</h2>
                        <p class=" asc c808"> {{obj.tel}}</p>
                      </div>
                    </li>
                    <li class="flex  mb40">
                      <img class="store asc mr20" src="../../../assets/img/wash-car-img/car.png">
                      <div class="flex jcsb fg1">
                        <!-- <h2 class="fn">{{obj.carName}}</h2> -->
                        <h2 class="fn">{{carInfo}}</h2>
                        <a class="select" @click="toSelectCar" >
                          <img src="../../../assets/img/wash-car-img//arrow.png">
                        </a>
                      </div>
                    </li>
                    <div class="line w100" style="height: 2rem;"></div>
                    <li class="mt40 mb40">
                      <div class="flex jcsb fg1">
                        <h2 class="fn">服务产品</h2>
                        <!-- <p>共选择<span class="c297e">{{obj.num}}项</span>服务产品</p> -->
                        <p>共选择<span class="c297e">{{serviceList.length ?serviceList.length:0 }}项</span>服务产品</p>
                      </div>
                    </li>
                    <li class="flex mb40" v-for="el in serviceList">
                      <h2 class="mr20 fn">{{el.serviceItem}}</h2>
                      <!-- <h2 class="fn  cff40">￥{{obj.price}}</h2> -->
                      <h2 class="fn  cff40">￥{{el.currentPrice}}</h2>
                    </li>
                    <div class="line w100" style="height: 2rem;"></div>
                    <li class=" mt40 flex">
                      <img class="store asc mr20" src="../../../assets/img/wash-car-img/card.png">
                      <div class="flex jcsb fg1">
                        <h2 class="fn">代金券/优惠券</h2>
                        <p>
                          <!-- <span class="mr25 cff40">-{{obj.card}}元</span> -->
                          <span class="mr25 cff40">-{{discount}}元</span>
                          <a class="select" @click="toCard">
                            <img src="../../../assets/img/wash-car-img/arrow.png">
                          </a>
                        </p>
                      </div>
                    </li>
                  </ul>
            </section>
            <!-- password -->
            <section class="password pf bcfff tc" v-if="isPassword">
                <div class="flex mb50">
                  <a href="#" @click="onCancel">
                    <img src="../../../assets/img/wash-car-img/wrong.png">
                  </a>
                  <h3 class="f25 fn fg1 tc">请输入支付密码</h3>
                </div>
                <p class="f20 mb20" style="color: #333;">车辆服务平台</p>
                <h1 class="f50 mb30 fn">￥ {{money}}</h1>
                <div class="line mb25" style="height: 2rem;"></div>
                <div class="flex jcsb mb30 c808">
                  <p class="f25">支付方式</p>
                  <p>
                    <span class="mr15">零钱</span>
                    <a class="select" href="#">
                      <img src="../../../assets/img/wash-car-img/arrow-grey.png">
                    </a>
                  </p>
                </div>
                  <ul class="input flex jcsa pb40" @click="toInfo">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                  </ul>
            </section>
        </main>
        <!-- footer -->
        <ul class="footer  bcff  flex pf w100 jcsb f20 aic">
            <li>
                <a class="c000 ml20" @click="onShow">
                    <img class="waiter mr10 " src="../../../assets/img/wash-car-img/waiter.png">
                    联系客服
                </a>
            </li>
            <li class="flex">
                <p class="f25 cff40 asc mr20">合计：<span class="f20">￥{{money}}</span></p>
                <a class="pay-order f25 cfff mr20" @click="onPassword">
                    立即下单
                </a>
            </li>
        </ul> 
        <!-- call -->
         <ul class="call tc bcff w100 pf f25" v-show="isCall">
            <li>
                <span>18642589456</span>
            </li>
            <div class="line " style="height:2rem"></div>
            <li>
                <span>复制</span>
            </li>
            <div class="line " style="height: 7rem;"></div>
            <li>
                <span @click="onCancel">取消拨号</span>
            </li>
        </ul>
        <!-- shade-->
       <div class="shade pa" v-show="isShade" ></div>
    </div>
</template>
<script>
import { storeList  } from '../../../api/wash';
export default {
  mounted(){
    this.init();
    this.initOrder();
  },
  methods:{
    initOrder(){//更新账单
      if(!this.cardInfo && !this.money){
        for(let i=0;i<this.serviceList.length;i++){
          this.money+=this.serviceList[i].currentPrice;
        }
      }else{
        this.discount = this.cardInfo.discountsNumber;
        let temp = this.money - this.cardInfo.discountsNumber;
        console.log("e",temp);
        if(  temp> 0){
          this.money = temp;
        }else{
          this.money = 0;
        }
        
      }
    },
    init(){//初始化页面
            //当前门店的id
            this.id  = this.$route.params.id;
            this.serviceList = this.$route.params.serviceList;
            this.storeInfo = this.$route.params.storeInfo;
            this.carInfo = this.$route.params.carInfo;
            this.cardInfo = this.$route.params.cardInfo;
            if( this.$route.params.money){
              this.money = this.$route.params.money;
              // console.log( "to", this.money);
            }
            // console.log(this.serviceList);
            //门店详情
            storeList({
                categoryId: 2
            }).then(r=>{
              // console.log(r);
                let res =JSON.parse(JSON.stringify(r.data));
                let arr = res.filter((item,value,res)=>{
                    return item.id ==this.id;
                })
                if(arr[0]){
                    this.obj = JSON.parse(JSON.stringify(arr[0]));
                    // console.log(this.obj);
                }
            });
        },
        onShow(){
            this.isCall = true;
            this.isShade = true;
        },
        onCancel(){
            this.isCall = false;
            this.isShade = false;
            this.isPassword = false;
        },
        onPassword(){
          this.isPassword = true;
          this.isShade = true;
        },
        // 跳转至支付完成
        toInfo(){
          this.$router.push({
            name:'payOrder',
            params:{
              id:this.id,
              money:this.money,
              serviceList:this.serviceList,
              storeInfo:this.storeInfo
            }
          })
        },
        //跳转至选择车页面
        toSelectCar(){
          this.$router.push({
            name:'selectCar',
            params:{
              id:this.id,
              money:this.money,
              serviceList:this.serviceList,
              storeInfo:this.storeInfo
            }
          })
        },
        //跳转优惠劵页面
        toCard(){
          this.$router.push({
            name:'card',
            params:{
              id:this.id,
              money:this.money,
              serviceList:this.serviceList,
              storeInfo:this.storeInfo,
              carInfo:this.carInfo
            }
          })
        }
    },
    data(){
      return{
        discount:0,
        cardInfo:0,
        carInfo:'',
        storeInfo:{},
        resMoney:0,//总价
        money:0,//
        serviceList:[],
        id:"",
        isPassword:false,
        isCall:false,
        isShade:false,
        obj:{
        },
        obj2:{
          // carName: "奔驰FWE4/豫A56487",
          num:1,
          price:39.9,
          card:10    
        }
      }
    }
}
</script>
<style scoped>
.cff40{color: #ff4000;}
.c297e{color: #297efa;}
.c808{color: #808080;}
.wd125{width: 125rem;}
.border-dash{ height: 50rem;border-bottom: 2rem dashed #e1e1e1;}
.mb35{margin-bottom: 35rem;}
.asc{align-self:center;}
.line{height: 1rem;background-color: #f7f7f7;}
.home{background-color: #f7f7f7;}
/* 头部样式  ---需要可剪切 */
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  .img{width: auto;left: 20rem;top: 0;}

main {margin-top: -310rem;margin-bottom: 160rem;}
main section{padding: 40rem 30rem;border-radius: 20rem;box-sizing: border-box;} 
/* 图片ul样式 */
section.main-order .img li{width: 100rem;height: 100rem;}
section.main-order ul.img li p{font-size: 25rem;width: 50rem;height: 50rem;transform: translate(50%,40%);line-height: 30rem;}
section.main-order ul.img li.order{background: url(../../../assets/img/wash-car-img/round-blue.png) no-repeat;background-size: 100rem auto;} 
section.main-order ul.img li.pay{background: url(../../../assets/img/wash-car-img/round-green.png) no-repeat;background-size: 100rem auto;} 
section.main-order ul.img li.store{background: url(../../../assets/img/wash-car-img/round-red.png)no-repeat;background-size: 100rem auto;} 
/* 信息ul */
section.main-order ul.info li img{width: 37rem;height: auto;}
section.main-order ul.info h2{font-size: 28rem;}
section.main-order ul.info p{font-size: 20rem;}
section.main-order ul.info li a.select img{width: auto;height: 30rem;vertical-align: middle;}
/*支付密码*/
section.password{top: 600rem;left: 50rem;height: 470rem;width: 650rem;z-index: 10;}
section.password ul.input li{height: 70rem;width: 70rem;border-radius: 5rem;background-color: #f2f2f2;}
/* 页脚 */
ul.footer{height: 115rem;left: 0; bottom:0;padding: 0 20rem;box-sizing: border-box; background-color: #fff;}
ul.footer img.waiter{height: 40rem; width: auto;vertical-align: middle;}
ul.footer a.pay-order{background-color: #1e72f0;padding: 20rem 50rem;border-radius: 50rem;}
/* 洗车-拨号 */
ul.call {height: 305rem;left: 0; bottom:0;background-color: #fff;padding: 20rem 0; border-radius: 20rem  20rem  0 0;z-index: 10;}
ul.call li{height: 100rem;line-height: 100rem;}
.shade{width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);top: 0;left: 0;}
</style>